<template>
  <div>
    <van-nav-bar title="约课记录" />
    <van-tabs title-active-color="#eb6100" color="#eb6100" v-model="active">
      <van-tab title="待上课">
        <div class="dy-div">
          <img src="../assets/img/no-message.png" alt />
          <p>还没有待上课记录哦</p>
          <button>立即约课</button>
        </div>
      </van-tab>
      <van-tab title="已上课">
        <div class="dy-div">
          <img src="../assets/img/no-message.png" alt />
          <p>还没有上课记录哦</p>
          <button>立即约课</button>
        </div>
      </van-tab>
      <van-tab title="已取消">
        <div class="dy-div">
          <img src="../assets/img/no-message.png" alt />
          <p>还没有取消课记录哦</p>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0
    };
  },
  components: {}
};
</script>

<style scoped>
.dy-div {
  width: 200px;
  margin: 100px auto;
  text-align: center;
}
.dy-div > img {
  width: 100%;
}
.dy-div > p {
  font-size: 3.73333vw;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  color: #b7b7b7;
  line-height: 0.53333rem;
  line-height: 5.33333vw;
  margin-bottom: 0.66667rem;
  margin-bottom: 6.66667vw;
  text-align: center;
}
.dy-div > button {
  margin: 0 auto;
  display: block;
  width: 23.46667vw;
  height: 7.46667vw;
  font-size: 3.46667vw;
  color: #fff;
  background: #eb6100;
  border-radius: 0.66667vw;
  border: none;
}
</style>